<!-- 机票火车票 页面 下面 -->
<template>
    <div class="box">
        <header class="tickets-header">
            <img src="@/assets/ticket.png" width="35px" height="30px">
            <span>特价机票</span>
        </header>

        <div class="tickets-box">
            <ul class="tickets-list">
                <li class="tickets-item" v-for="(item,index) in resTickesList" :key="index">
                    <a href="#" class="tickets-item-link">
                        <img class="tickets-item-link-img" :src="item.img" width="225px" height="140px">
                        <div class="tickets-item-link-inf">
                            <span class="tickets-item-link-left">{{item.place}}</span>
                            <span class="tickets-item-link-right">￥{{item.money}}</span>
                        </div>
                    </a>
                </li>
            </ul>

            <div class="tickets-nav-box">
                <ul class="tickets-nav-list">
                    <li class="tickets-nav-item" :class="{'active':index1 == count}" v-for="(item1,index1) in specialPriceList" :key="index1" @click="getSpList(index1)">{{item1.navPlace}}</li>
                </ul>
            </div>

            <ul class="item-place-tickets-list">
                <li class="item-place-tickets-item" v-for='(item2,index2) in specialPriceList[count].spList' :key="index2">
                    <span class="item-place-tickets-name">{{item2.toPlace}}</span>
                    <span class="item-place-tickets-tip">{{item2.tip}}</span>
                    <span class="item-place-tickets-money">￥{{item2.ticketPrice}}</span>
                </li>
            </ul>
            <span class="line-left"></span>
            <span class="line-right"></span>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data () {
        return {
            count:0,
            resTickesList:[
                {
                    img:'http://b1-q.mafengwo.net/s5/M00/7B/37/wKgB3FIDDByAcTAFAAPaSajnMyk40.jpeg?imageMogr2%2Fthumbnail%2F%21750x563r%2Fgravity%2FCenter%2Fcrop%2F%21750x563%2Fquality%2F90',
                    place:'北京-太原',
                    money:218
                },
                {
                    img:'http://b1-q.mafengwo.net/s5/M00/53/D1/wKgB3FGcJuCAFdf1AAM-uEqmHBw07.jpeg?imageMogr2%2Fthumbnail%2F%21750x563r%2Fgravity%2FCenter%2Fcrop%2F%21750x563%2Fquality%2F90',
                    place:'北京-大连',
                    money:347
                },
                {
                    img:'http://n1-q.mafengwo.net/s7/M00/6D/AD/wKgB6lSzVjSAG6w0AAkhK5yG5RM08.jpeg?imageMogr2%2Fthumbnail%2F%21750x563r%2Fgravity%2FCenter%2Fcrop%2F%21750x563%2Fquality%2F90',
                    place:'北京-沈阳',
                    money:305
                },
                {
                    img:'http://n1-q.mafengwo.net/s8/M00/7B/EA/wKgBpVW7QnOAeSPvAADFCh-_z1828.jpeg?imageMogr2%2Fthumbnail%2F%21750x563r%2Fgravity%2FCenter%2Fcrop%2F%21750x563%2Fquality%2F90',
                    place:'北京-长春',
                    money:377
                }
            ]
        };
    },

    components: {},
    computed:{
        ...mapState(['specialPriceList'])
    },
    mounted(){
        this.$store.dispatch('reqSpecialPrice')
    },
    methods: {
        getSpList(index){
            this.count = index
        }
    }
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .box
        width 1000px
        margin 0 auto
        .tickets-header
            margin 0 20px
            padding 15px 0
            font-size 18px
            color #666
            display flex
            align-items center
            span 
                margin-left 12px
        .tickets-box
            padding 20px 19px
            border 1px solid #e5e5e5
            margin-bottom 30px
            background-color #fff
            height 350px
            .tickets-list
                display flex
                justify-content space-between
                .tickets-item
                    .tickets-item-link
                        .tickets-item-link-img
                            position absolute
                        .tickets-item-link-inf
                            position relative
                            top 110px
                            color #ffffff
                            background-color rgba(0,0,0 .6)
                            display flex
                            justify-content space-between
                            width 225px
                            line-height 30px
                            padding 0 15px
                            box-sizing border-box
                            font-size 16px
            .tickets-nav-box
                background-color #f6f6f6
                font-size 14px
                color #666666
                margin-top 125px
                line-height 40px
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;
                user-select: none;
                .tickets-nav-list
                    display flex
                    margin-left 10px
                    margin-right 10px
                    .tickets-nav-item
                        margin 0 10px
                        padding 0 10px
                        cursor pointer
                    .active
                        background-color #ff9d00
                        color #ffffff
                        position relative
                        &:after
                            content ''
                            position absolute
                            bottom -10px
                            left 40%
                            border-color #ff9d00 transparent transparent  transparent 
                            border-style solid
                            border-width 5px 
            .item-place-tickets-list
                display flex
                flex-direction column
                height 150px
                flex-wrap wrap
                align-content space-between
                margin-top 10px
                .item-place-tickets-item
                    line-height 25px
                    margin-top 10px
                    font-size 12px
                    color #666666
                    display flex 
                    padding 0 10px
                    cursor pointer
                    .item-place-tickets-name
                        width 78px
                    .item-place-tickets-tip
                        text-align center
                        padding 0 65px
                    .item-place-tickets-money
                        font-size 20px
                        color #ff9d00
            .line-left,.line-right
                position relative
                background-color #e5e5e5
                width 1px
                height 122px
                display inline-block
                bottom 135px
            .line-left
                left 316px
            .line-right
               left 640px

</style>